<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="color: var(--themeColor)">组织架构</span>
        </div>
        <div class="content">
          <div class="content-title">
            <span><i class="el-icon-s-home"></i>福建海克斯科技股份有限公司</span>
            <span
              >负责人
              <el-dropdown trigger="click" class="drop" @visible-change="dropdownChange">
                <span :class="this.isDropdown ? 'dropdownActive' : ''">
                  操作<i class="el-icon-help"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="showAddSector()">添加一级部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </div>
          <!-- 树状组织结构 -->
          <div class="content-tree">
            <el-tree :data="treeData" :props="defaultProps" node-key="id" default-expand-all>
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  {{ data.manager || '暂无' }}
                  <el-dropdown trigger="click" class="drop">
                    <span>操作<i class="el-icon-help"></i> </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="showAddSector(data)"
                        >添加子部门</el-dropdown-item
                      >
                      <el-dropdown-item @click.native="showEditorialSector(data)"
                        >编辑部门</el-dropdown-item
                      >
                      <!-- 如果 还有子部门 不能显示删除按钮 -->
                      <el-dropdown-item
                        @click.native="deleteSector(data)"
                        v-if="data && !data.children"
                        >删除部门</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </span>
              </span></el-tree
            >
          </div>
        </div>
      </el-card>
    </div>
    <!-- 弹窗组件 -->
    <DepartDialog
      :dialogFormVisible.sync="dialogFormVisible"
      :employeesList="employeesList"
      @addDepart="addDepart"
      ref="departDialog"
    ></DepartDialog>
  </div>
</template>

<script>
import {
  getCompanyDepartment,
  addCompanyDepartment,
  deleteCompanyDepartment,
  editorialCompanyDepartment,
  getSysUserSimple,
} from '@/api'
import getTree from '@/utils/getTree'
import DepartDialog from './cpns/departDialog.vue'
export default {
  name: 'department',
  data() {
    return {
      treeData: [],
      defaultProps: {
        // 次级树 标题
        children: 'children',
        label: 'name',
      },
      isDropdown: false, // 是否下拉
      dialogFormVisible: false, // 是否显示弹窗
      isEdit: false,
      employeesList: [], // 人员列表
      parentid: '', // 部门id
    }
  },
  created() {
    this.fetchCompanyDepartment()
    this.fetchEmployeesList()
  },
  methods: {
    // 获取部门列表
    async fetchCompanyDepartment() {
      const { data: res } = await getCompanyDepartment()
      // 后端返回的是 扁平化的数组 重新生成 树状数组
      this.treeData = getTree(res.depts, '')
    },
    async fetchEmployeesList() {
      const { data: res } = await getSysUserSimple()
      this.employeesList = res
    },
    // 下拉菜单显示与隐藏
    dropdownChange(e) {
      this.isDropdown = e
    },
    showAddSector(data) {
      this.isEdit = false
      this.parentid = data.id
      this.dialogFormVisible = true
    },
    showEditorialSector(data) {
      this.isEdit = true
      // 通过refs 修改departDialog的form的值
      this.$refs.departDialog.form = data
      this.dialogFormVisible = true
      console.log('修改', data)
    },
    async deleteSector(data) {
      // console.log('删除', data)
      // 成功confirm   失败cancel  this.$messagebox.confirm 是异步请求 用async/await 修饰
      const isDel = await this.$messagebox
        .confirm('是否确认永久删除该部门', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .catch((err) => err)
      // console.log(isDel)
      // 取消删除
      if (isDel === 'cancel') return this.$message('取消了删除')
      // 调用删除部门接口
      const res = await deleteCompanyDepartment(data.id)
      console.log(res)
      if (res.code == 10000) {
        this.$message.success(res.message)
      } else {
        this.$message.error(res.message)
      }
      // 重新获取页面数据结构
      this.fetchCompanyDepartment()
    },
    // (添加行为)接收到子组件传递到的form数据 并发送添加部门请求 (修改行为) 发送修改结果
    async addDepart(from) {
      if (!this.isEdit) {
        // 添加
        const { data: res } = await addCompanyDepartment({ ...from, pid: this.parentid })
        if (res) {
          this.$message.success('添加' + res.name + '部门成功')
        } else {
          this.$message.error('添加失败！！！')
        }
      } else {
        // 修改
        const res = await editorialCompanyDepartment(from)
        if (res.code === 10000) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
        console.log(res)
      }
      // 重新获取页面数据结构
      this.fetchCompanyDepartment()
    },
  },
  components: { DepartDialog },
}
</script>

<style lang="less" scoped>
.box-card {
  padding: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.content {
  padding: 20px 40px;
  .content-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
}
.drop {
  margin: 0 50px;
  font-size: 16px;
}
.custom-tree-node {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  // background-color: aqua;
}
.dropdownActive {
  color: var(--themeColor);
}
</style>
